let inps = document.querySelectorAll("input");
let form = document.querySelector("form");
// 账号验证
inps[0].oninput = e => {
    e = e.srcElement;
    // 账号里有空格时
    if(e.value.length==0){
        e.style.border="1px solid red";
        e.nextElementSibling.style.display="block";
        e.nextElementSibling.style.color="red";
        e.nextElementSibling.nextElementSibling.style.display="none";
    }else if(/ +/.test(e.value)){
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.style.color="red";
    }else{
        e.style.border="1px solid #ccc";
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.style.color="green";
    }
}
inps[0].onblur = e => {
    e = e.srcElement;
    // 账号里有空格时
    if(e.value.length==0){
        e.nextElementSibling.style.display="block";
        e.nextElementSibling.style.color="red";
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid red";
    }else if(/ +/.test(e.value)){
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.style.color="red";
    }else{
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid #ccc";
    }
}
// 密码验证
inps[1].oninput = e => {
    e = e.srcElement;
    if(e.value.length==0){
        e.nextElementSibling.style.display="block";
        e.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }else{
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.style.color="green";
        e.style.border="1px solid #ccc";
    }
    if(/ +/.test(e.value)){
        e.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }else{
        e.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.style.color="green";
    } 
    if(e.value.length<8|e.value.length>16){
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }else{
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.color="green";
    }
    if(/^(?![0-9]+$)(?![A-Z]+$)(?![a-z]+$)(?![_]+$)[\w]+$/.test(e.value)){
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.color="green";
    }else{
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }
}
inps[1].onblur = e => {
    e = e.srcElement;
    if(e.value.length==0){
        e.nextElementSibling.style.display="block";
        e.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }else{
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.style.color="green";
    }
    if(e.nextElementSibling.style.display=="block"){
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid red";
    }else if(e.nextElementSibling.nextElementSibling.style.color=="red"){
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid red";
    }else if(e.nextElementSibling.nextElementSibling.nextElementSibling.style.color=="red"){
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid red";
    }else if(e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.color=="red"){
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid red";
    }else{
        e.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.nextElementSibling.style.display="none";
        e.nextElementSibling.nextElementSibling.style.display="none";
        e.style.border="1px solid #ccc";
    }
}
// 手机验证
inps[2].onblur = e => {
    e = e.srcElement;
    if(/^[1][3456789][0-9]{9}$/.test(e.value)){
        e.nextElementSibling.style.display="none";
        e.nextElementSibling.style.color="green";
        e.style.border="1px solid #ccc";
    }else{
        e.nextElementSibling.style.display="block";
        e.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }
}
// 验证码
let h6 = document.querySelector("h6");
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
h6.onclick = e => {
    e = e.srcElement;
    let arr1=[];
    while(arr1.length<7){
        let r = parseInt(Math.random() * arr.length);
        if(arr1.indexOf(arr[r])==-1){
            arr1.push(arr[r]);
        }
    }
    e.innerHTML=(arr1.join(""));
}
inps[3].onblur = e => {
    e = e.srcElement;
    if(e.value.toUpperCase()==h6.innerHTML.toUpperCase()&&e.value!="点击生成验证码"){
        e.nextElementSibling.nextElementSibling.innerHTML="验证成功";
        e.nextElementSibling.nextElementSibling.style.color="green";
        e.style.border="1px solid #ccc";
    }else{
        e.nextElementSibling.nextElementSibling.innerHTML="验证失败";
        e.nextElementSibling.nextElementSibling.style.display="block";
        e.nextElementSibling.nextElementSibling.style.color="red";
        e.style.border="1px solid red";
    }
}
// 提交
let f1=document.querySelector("form");
f1.onsubmit=e=>{
    e = e.srcElement;
    for(let i=0;i<inps.length-2;i++){
        if(inps[i].style.border=="1px solid rgb(204, 204, 204)"&&inps[5].checked){
            return true;
        }else{
            return false;
        };
    }
}
